<template>
    <div class="w-full">
        <!-- 歌曲标题 -->
        <div class="h-14 flex p-2">
            <div class="w-1/4 line-clamp-1 text-ellipsis text-[var(--iconBg)] flex items-center">
                <p class="mr-6 min-w-[25%]">#</p>
            </div>
            <div class="w-[60%] line-clamp-1 text-ellipsis text-[var(--iconBg)] flex items-center">音乐标题</div>
            <div class="w-[7%] line-clamp-1 text-ellipsis text-[var(--iconBg)] flex items-center">喜欢</div>
            <div class="w-1/6 line-clamp-1 text-ellipsis text-[var(--iconBg)] flex items-center justify-center">时长（秒）</div>
        </div>
        <!-- 歌曲列表 -->
        <div class="w-full h-fit rounded-lg" ref="contRef">
            <ul v-if="songList.length">
                <li ref="liStyle" @dblclick="playMusic(item)" v-for="(item, index) in songList" :key="item.id"
                    class="flex w-full h-10 p-2 rounded-lg hover:bg-[var(--inputBg)] duration-300 my-1">
                    <div class="w-1/4 flex items-center">
                        <p class="mr-6 text-[var(--iconBg)] min-w-[25%] ">{{ index + 1 }}</p>
                    </div>
                    <div class="w-[54%] flex items-center select-none">
                        <p class="text-[var(--text)] mr-2 max-w-full line-clamp-1">{{ item.name }}</p>
                    </div>
                    <div class="w-[13%] flex items-center justify-center">
                        <i class="header_icon iconfont cursor-pointer transition-transform transform"
                            :class="item.liked ? 'icon-aixin-fill text-red-500 scale-110' : 'icon-aixin scale-100'"
                            @click="toggleLike(item)">
                        </i>
                        <i class="text-sm ml-1">{{ item.thumbs }}</i>
                    </div>
                    <div class="w-1/6 flex items-center justify-center">
                        <p class="w-max-[1/3] line-clamp-1 text-ellipsis text-[var(--iconBg)]">{{ item.voiceLength }}
                        </p>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script setup lang='ts'>
    import { ref } from 'vue'
    import { useRouter } from "vue-router"
    import { thumpVoice, cancelThumpVoice } from "@renderer/api/voice";

    // 定义 audio 实例
    const audio = ref < HTMLAudioElement | null > (null)
    let { songList, slider } = defineProps < {
        songList: Array,
        slider: false
    } > ()

    // 播放音乐方法
    const playMusic = (item) => {
        if (!audio.value) {
            audio.value = new Audio()
        }
        audio.value.src = item.voiceUrl
        audio.value
            .play()
            .then(() => {
                console.log(`正在播放: ${item.name}`)
            })
            .catch((error) => {
                console.error("音频播放失败", error)
            })
    }

    // 切换点赞状态并更新点赞数量
    const toggleLike =  (item) => {
        item.liked = !item.liked
        if (item.liked) {
            thumpVoice(item.id)
            item.thumbs += 1  // 点赞时数量加 1
        } else {
            cancelThumpVoice(item.id)
            item.thumbs -= 1  // 取消点赞时数量减 1
        }
    }
</script>

<style scoped>
</style>